<template>
	<!-- 我的加量包 -->
	<view>
		<baseHead :showReturn="true" title="我的加量包">
		</baseHead>
		<view class="content">
			<view class="title">当前剩余</view>
			<view class="cardbox">
				<view class="shuju" style="" v-for="(item,index) in residue" :key="index">
					<view class="text">{{item.Title}}</view>
					<view class="text1">剩余{{item.RemainingTimes}}次</view>
				</view>

			</view>
			<view class="title">购买记录</view>
			<view v-if="PayRecord.length>0">
				<view class="cardbox" v-for="item in PayRecord">
					<view class="shuju" style="padding-bottom: 2rpx;border-bottom:none">
						<view class="text">{{item.ServiceName}}</view>
						<view class="text2">￥{{item.PaymentAmount}}</view>
					</view>
					<view class="shuju" style="border-bottom:none">
						<view class="text3">数量：1</view>
						<view class="text4">{{item.CreatedTime}}</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="100">
			</u-empty>

		</view>


	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	export default {
		components: {
			baseHead,
		},
		data() {
			return {
				PayRecord: [], //购买记录
				residue: [], //剩余
				obj: {
					Keyword: "", //关键字
					OrderType: 2, //订单类型类型 1-套餐(默认) 2-增值服务
					UserId: null, //用户ID
					CorpId: null, //企业ID
					PageIndex: 1, //页码
					PageSize: 20, //每页大小
					isCorp: null, // 0查询个人订单 1查询企业订单
				},
				status: 'loadmore',
				arr: []
			}
		},

		onLoad() {
			this.dangqianshengyu()
		},
		methods: {
			dangqianshengyu() {
				const app = getApp()
				const userRole = app.globalData.userRole;
				let obj1 = {
					CorpId: "", //企业ID、2选一 
					UserId: "" //用户ID  2选一 
				}
				if (userRole == 1) {
					obj1.CorpId = app.globalData.currentCorp.Id
					this.obj.isCorp = 1
					this.obj.CorpId = app.globalData.currentCorp.Id
				} else if (userRole == 0) {
					obj1.UserId = app.globalData.user.UserId
					this.obj.isCorp = 0
					this.obj.CorpId = app.globalData.user.UserId
				}
				this.$http.huirc.servitemsMybag(obj1).then(res => {
					// console.log(res);
					if (res.Success) {
						this.residue = res.Result
					}
				});
				this.$http.huirc.planlist(this.obj).then(res => {
					// console.log("购买记录", res);
					if (res.Success) {
						if (this.obj.PageIndex == 1 && res.Result.Items.length == 0) {
							this.PayRecord = [];
						} else {
							if (res.Result.Items.length == 0) {
								// 没有数据----
								this.status = "nomore";
								return;
							}
							this.arr = this.arr.concat(res.Result.Items)
							this.arr.forEach(item => {
								if (item.OrderStatus == 20) {
									this.PayRecord.push(item)
								}
							})
							console.log("itemdds", this.PayRecord);
						}

						if (res.Result.Items.length >= this.obj.PageSize) {
							this.obj.PageIndex++;
							// 表示还有数据
						} else {
							//没有更多数据了
							this.status = "nomore";
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 36rpx 30rpx;

		.title {
			font-size: 26rpx;
			font-weight: 400;
			color: #000000;
			margin: 10rpx 0;
		}

		.cardbox {
			background: #FFFFFF;
			border-radius: 20rpx;
			opacity: 1;
			// padding: 30rpx;
			margin-bottom: 20rpx;

			.shuju {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #E7E7E8;
				// padding-bottom: 30rpx;

				.text {
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					// padding-bottom: 30rpx;
				}

				.text1 {
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}

				.text2 {
					font-size: 30rpx;
					font-weight: 400;
					color: #F35370;
				}

				.text3 {
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}

				.text4 {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

		}
	}
</style>